import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Radio } from 'antd';
import React from 'react';

const FormItem = Form.Item;
const { TextArea } = Input;

const CreateForm = props => {
  const { createModalVisible, form, onSubmit: handleAdd, onCancel } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  const formLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 15,
    },
  };

  return (
    <Modal
      destroyOnClose={true}
      title="新建短信模板"
      visible={createModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem
        {...formLayout}
        label="模板名称"
       >
        {form.getFieldDecorator('templateName', {
          rules: [
            {
              required: true,
              message: '请输入至少三个字符的规则描述！',
              min: 3,
            },
          ],
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem
        label="模板状态"
        {...formLayout}
        >
        {form.getFieldDecorator('state', {
          rules: [
            {
              required: true,
              message: '请选择模板状态',
            },
          ],
        })(
          <Radio.Group>
          <Radio value='0'>启用</Radio>
          <Radio value='1'>停用</Radio>
        </Radio.Group>
        )}
      </FormItem>
      <FormItem
        label="模板类别"
        {...formLayout}
        >
        {form.getFieldDecorator('templateType', {
          rules: [
            {
              required: true,
              message: '请选择模板类别',
            },
          ],
        })(
          <Radio.Group>
          <Radio value='0'>手动</Radio>
          <Radio value='1'>自动</Radio>
        </Radio.Group>
        )}
      </FormItem>
      <FormItem
        {...formLayout}
        label="模板编码"
      >
        {form.getFieldDecorator('templateCode', {
          rules: [
            {
              required: true,
              message: '请输入模板编码！',
            },
          ],
        })(<Input placeholder="请输入模板编码！" />)}
      </FormItem>
      <FormItem
        {...formLayout}
        label="短信内容"
      >
        {form.getFieldDecorator('templateContent', {
          rules: [
            {required: true, message: '请输入短信内容！'},

          ],
        })(<TextArea rows={4} placeholder="请输入短信内容！" />)}
      </FormItem>
    </Modal>
  );
};

export default Form.create()(CreateForm);
